<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>前后端分离项目登录测试</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        username: {{ uname }}<br>
        password: {{ pword }}
    </div>
    <div>
        <input type="text" v-model="uname">
    </div>
    <div>
        <input type="password" v-model="pword">
    </div>
    <div>
        <button type="button" @click="submit">Submit</button>
        <button v-if="success" type="button" @click="toIndex">toIndex</button>
    </div>
    <div>
        {{ msg }}
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data() {
            return {
                uname: 'admin',
                pword: '123456',
                success: false,
                msg: ''
            };
        },
        methods: {
            toIndex() {
                window.location.href = "index.html";
            },
            submit() {
                axios.post("http://localhost:8082/myhome/login", this.$data).then(res => {
                    this.success = res.data.success;
                    this.msg = res.data.message;
                    window.localStorage.setItem("token", res.data.data);
                }).catch((err) => {
                    console.error(err);
                });
            }
        }
    });
</script>
</body>
</html>